<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="./tz-ui.css">
    <style>
        *{margin:0;padding: 0}
        html,body{font-family: 'Microsoft YAHei','微软雅黑','宋体',sans-serif}
        h3{padding: 10px 0;color: #666}
        .outer{width: 960px;margin: 5px auto;background: #f1f1f1;padding: 10px;}
    </style>
</head>
<body>
<div class="outer">
    <div class="item">
        <h3>Button</h3>
        <a href="javascript:;" class="tz-btn">按钮</a>
        <button class="tz-btn tz-btn-danger">按钮</button>
        <input type="button" value="按钮" class="tz-btn tz-btn-success">
    </div>
    <div class="item">
        <h3>Select</h3>
        <select class="tz-select">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
        <select class="tz-select">
            <option value="1">北京北京北京</option>
            <option value="2">上海上海</option>
            <option value="3">广州</option>
            <option value="4">深圳深圳</option>
        </select>
    </div>
    <div class="item">
        <h3>File</h3>
        <input type="file" class="tz-file">
        <input type="file" class="tz-file">
    </div>
    <div class="item">
        <h3>Radio</h3>
        <div class="tz-radio">
            <label class="tz-radio-item"><input type="radio" value="北京" name="city"><span class="tz-radio-text">北京</span></label>
            <label class="tz-radio-item"><input type="radio" value="上海" name="city"><span class="tz-radio-text">上海</span></label>
            <label class="tz-radio-item"><input type="radio" value="广州" name="city"><span class="tz-radio-text">广州</span></label>
            <label class="tz-radio-item"><input type="radio" value="深圳" name="city"><span class="tz-radio-text">深圳</span></label>
        </div>
    </div>
    <div class="item">
        <h3>Checkbox</h3>
        <div class="tz-checkbox">
            <label class="tz-checkbox-item"><input type="checkbox" name="test"></label>
        </div>
        <div class="tz-checkbox">
            <label class="tz-checkbox-item"><input type="checkbox" value="北京" name="city"><span class="tz-checkbox-text">北京</span></label>
            <label class="tz-checkbox-item"><input type="checkbox" value="上海" name="city"><span class="tz-checkbox-text">上海</span></label>
            <label class="tz-checkbox-item"><input type="checkbox" value="广州" name="city"><span class="tz-checkbox-text">广州</span></label>
            <label class="tz-checkbox-item"><input type="checkbox" value="深圳" name="city"><span class="tz-checkbox-text">深圳</span></label>
        </div>
    </div>
    <div class="item">
        <h3>Toggle Button</h3>
        <span class="tz-toggle-btn"></span>
    </div>
    <div class="item">
        <h3>Title</h3>
        <a href="javascript:;" class="tz-btn" data-tz-title="按钮文字提示按钮文字提示">按钮</a>
        <a href="javascript:;" class="tz-btn tz-btn-success" data-tz-title="按钮文字提示">长按钮长按钮</a>
        <span class="tz-toggle-btn" data-tz-title="文字提示文字提示"></span>
    </div>
    <div class="item">
        <h3>Text</h3>
        <input type="text" class="tz-input-text">
    </div>
    <div class="item">
        <h3>Link</h3>
        <a href="javascript:;" class="tz-link">百度一下</a>
    </div>
</div>
<script src="./jquery.min.js"></script>
<script src="./tz-ui.js"></script>
</body>
</html>